import React, { useState } from 'react';
import PropTypes from 'prop-types';

const BtnComponent = ({
  type,
  size,
  children,
  disabled,
  onClick,
  style,
  className,
}) => {
  const [hover, setHover] = useState(false);
  const [active, setActive] = useState(false);
  const publicSty = {
    border: 'none',
    outline: 'none',
    borderRadius: '4px',
    width: size,
    height: '32px',
    cursor: disabled ? 'not-allowed' : 'pointer',
    ...style,
  };
  // 鼠标事件
  const toggleHover = () => {
    setHover(!hover);
  };
  const clickColor = () => {
    setActive(!active);
  };
  const primary = {
    backgroundColor: hover ? '#77FFF5' : '#19E1D3',
    color: active ? '#E7EFFF' : '#1E252F',
    ...publicSty,
  };
  const danger = {
    backgroundColor: hover ? '#E75473' : '#C43A57',
    color: active ? '#E7EFFF' : '#1E252F',
    ...publicSty,
  };
  const gray = {
    backgroundColor: hover ? '#7B93B3' : '#5E728C',
    color: active ? '#1E252F' : '#E7EFFF',
    ...publicSty,
  };
  const blue = {
    backgroundColor: hover ? '#5591F4' : '#5591F4',
    color: active ? '#E7EFFF' : '#1E252F',
    ...publicSty,
  };

  let styles = {};
  if (type === 'primary') {
    styles = primary;
  } if (type === 'danger') {
    styles = danger;
  } if (type === 'gray') {
    styles = gray;
  } if (type === 'blue') {
    styles = blue;
  }
  return (
    disabled ? (
      <button
        type="button"
        style={styles}
        className={className}
        onMouseEnter={toggleHover}
        onMouseLeave={toggleHover}
        onMouseDown={clickColor}
        onMouseUp={clickColor}
        disabled="disabled"
      >
        {children}
      </button>
    )
      : (
        <button
          type="button"
          style={styles}
          className={className}
          onMouseEnter={toggleHover}
          onMouseLeave={toggleHover}
          onMouseDown={clickColor}
          onMouseUp={clickColor}
          onClick={onClick}
        >
          {children}
        </button>
      )
  );
};
BtnComponent.defaultProps = {
  type: 'primary',
  size: 78,
  disabled: false,
  onClick: Object,
  style: {},
  className: '',
};
BtnComponent.propTypes = {
  type: PropTypes.string, // 颜色  primary--绿色  danger--红色  gray--灰色
  size: PropTypes.number, // 按钮大小
  disabled: PropTypes.bool, // 是否禁用
  onClick: PropTypes.func, // 点击事件
  style: PropTypes.object, // 传入样式
  className: PropTypes.string, // 传入类名
};
export default BtnComponent;
